<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .search-box {
            float: right;
        }
        .sort-icon {
            margin-left: 5px;
        }
        .sort-icon::before {
            content: '\25B2'; /* Unicode for up arrow */
            color: #6c757d; /* Gray color for arrow */
        }
        .sort-icon.desc::before {
            content: '\25BC'; /* Unicode for down arrow */
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-5">
        <div class="row mb-3">
            <div class="col-6">
                <select class="form-select" v-model="pageSize" @change="fetchData">
                    <option v-for="option in pageSizeOptions" :value="option">{{ option }}</option>
                </select>
            </div>
            <div class="col-6">
                <input type="text" class="form-control search-box" placeholder="搜索" v-model="searchKeyword" @input="search">
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="table table-striped">
            <thead>
                <tr>
                    <th @click="sort('id')">ID <span :class="sortIcon('id')"></span></th>
                    <th @click="sort('username')">用户名 <span :class="sortIcon('username')"></span></th>
                    <th @click="sort('email')">邮箱 <span :class="sortIcon('email')"></span></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users" :key="user.id">
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                </tr>
            </tbody>
        </table>

        <!-- 数据信息 -->
        <div class="row">
            <div class="col-6">
                <p>Showing {{ (currentPage - 1) * pageSize + 1 }} to {{ Math.min(currentPage * pageSize, totalRecords) }} of {{ totalRecords }} entries</p>
            </div>
            <div class="col-6">
                <nav aria-label="Page navigation" class="float-end">
                    <ul class="pagination">
                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                            <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
                        </li>
                        <li class="page-item" v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
                            <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
                        </li>
                        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                            <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                currentPage: 1,
                totalPages: 0,
                pageSize: 10,
                pageSizeOptions: [5, 10, 20, 30, 50],
                users: [],
                totalRecords: 0,
                searchKeyword: '',
                sortColumn: '',
                sortDirection: ''
            },
            methods: {
                fetchData() {
                    axios.get('/test/PaginationServlet', {
                        params: {
                            page: this.currentPage,
                            pageSize: this.pageSize,
                            sortColumn: this.sortColumn,
                            sortDirection: this.sortDirection
                        }
                    })
                    .then(response => {
                        this.totalPages = response.data.totalPages;
                        this.users = response.data.users;
                        this.totalRecords = response.data.totalRecords;
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                    });
                },
                goToPage(page) {
                    if (page >= 1 && page <= this.totalPages) {
                        this.currentPage = page;
                        this.fetchData();
                    }
                },
                prevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage--;
                        this.fetchData();
                    }
                },
                nextPage() {
                    if (this.currentPage < this.totalPages) {
                        this.currentPage++;
                        this.fetchData();
                    }
                },
                search() {
                    this.currentPage = 1;
                    this.fetchData();
                },
                sort(column) {
                    if (column === this.sortColumn) {
                        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                    } else {
                        this.sortColumn = column;
                        this.sortDirection = 'asc';
                    }
                    this.fetchData();
                },
                sortIcon(column) {
                    if (column === this.sortColumn) {
                        return 'sort-icon ' + this.sortDirection;
                    }
                    return 'sort-icon';
                }
            },
            created() {
                this.fetchData();
            }
        });
    </script>
</body>
</html>
